<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/admin/userManger'}">员工管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加员工</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div>
      <el-card>
        <div>
          <el-form :model="addEmpFormModel" ref="addEmpRef" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="员工姓名" prop="username">
                  <el-input v-model="addEmpFormModel.empName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="员工编号">
                  <el-input v-model="addEmpFormModel.empId" @focus="generateEmpId()"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model="addEmpFormModel.empPassword" type="password" show-password></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码确认" prop="password2">
                  <el-input v-model="addEmpFormModel.password2" type="password" show-password></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="部门">
                  <el-cascader v-model="selectedKeys" :props="props" :options="parentDepartmentList" clearable
                               @change="parentItemCatChange" @focus="getDepartmentInfo"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职位">
                  <el-select v-model="addEmpFormModel.position" placeholder="请选择" @focus="getPositionInfo">
                    <el-option v-for="item in parentPositionList" :key="item.positionId" :label="item.positionName"
                               :value="item.positionId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入职日期">
                  <el-date-picker v-model="addEmpFormModel.hiredate" type="date" placeholder="选择入职日期"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="addEmpFormModel.phone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="addEmpFormModel.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="qq">
                  <el-input v-model="addEmpFormModel.qq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="微信">
                  <el-input v-model="addEmpFormModel.wechat"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="12">
                <el-form-item label="头像">
                  <el-upload class="upload-demo" :action="uploadUrl" :on-preview="handlePreview"
                             :on-remove="handleRemove"
                             :on-success="handleSuccess" list-type="picture" :limit="1">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学历">
                  <el-select v-model="addEmpFormModel.edu" placeholder="请选择" @focus="getEduInfo">
                    <el-option v-for="item in edu" :key="item.id" :label="item.eduName" :value="item.eduName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <div style="text-align: center">
          <el-button type="primary" @click="submitAddEmpInfo">提 交</el-button>
          <el-button type="warning" @click="emptyForm">重 置</el-button>
        </div>
      </el-card>
    </div>
    <el-dialog title="图片预览" :visible.sync="dialogImageVisible">
      <img :src="imageUrlPath" width="100%" height="100%"/>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AddEmpInfo",
  data() {
    const checkEmail = (rule, value, callback) => {
      const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$/
      if (emailRege.test(value)) {
        return callback()
      }
      callback(new Error('请填写正确的邮箱地址'))
    }

    const checkPhone = (rule, value, callback) => {
      const phoneRege = /^1[345789][0-9]{9}$/
      if (phoneRege.test(value)) {
        return callback()
      }
      callback(new Error('请填写正确的手机号'))
    }

    const checkPassword = (rule, value, callback) => {
      if (this.addEmpFormModel.password !== value) return callback(new Error('2次密码输入不一致'))
      // 否则校验成功
      callback()
    }

    return {
      addEmpFormModel: {
        empName: '',
        empId: '',
        empPassword: '',
        password2: '',
        position: '',
        department: '',
        hiredate: '',
        phone: '',
        email: '',
        qq: '',
        edu: '',
        wechat: '',
        empPhoto: ''
      },
      id: '',
      uploadUrl: 'http://localhost:8093/admin/uploadEmpPhoto',
      imageUrlPath: '',
      dialogImageVisible: false,
      //部门分级信息
      selectedKeys: [],
      props: {
        // 定义子节点菜单展开方式
        expandTrigger: 'hover',
        value: 'depId', // 选中数据的value值
        label: 'depName', // 选中数据展现名称
        children: 'children', // 自选项数据
        checkStrictly: true
      },
      edu: [],
      parentDepartmentList: [],
      parentPositionList: [],
    }
  },
  methods: {
    //删除图片
    async handleRemove(file, fileList) {
      const {data: res} = await this.$http.delete('/admin/deleteEmpPhoto/?key=' + this.addEmpFormModel.empPhoto).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error('删除图片失败')
      this.$message.success('删除图片成功')
    },
    //图片预览
    handlePreview(file) {
      this.imageUrlPath = file.response.data.urlPath
      this.dialogImageVisible = true
    },
    //上传图片
    handleSuccess(response, file) {
      if (response.status !== 200) return this.$message.error('文件上传失败')
      file.name = response.data.fileName
      // 获取虚拟路径
      this.addEmpFormModel.empPhoto = response.data.urlPath
    },

    //生成员工编号
    async generateEmpId() {
      const {data: res} = await this.$http.get('/admin/addEmpInfo/generateEmpId').catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) this.$message.error("生成员工编号失败")
      this.addEmpFormModel.empId = res.data
      this.$message.success("成功生成员工编号")
    },

    //获取部门信息
    parentItemCatChange() {
      this.addEmpFormModel.department = this.selectedKeys[this.selectedKeys.length - 1]
    },
    async getDepartmentInfo() {
      const {data: res} = await this.$http.get("/admin/addEmpInfo/getDepartmentInfo/2").catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("查询部门信息失败")
      this.$message.success("获取部门信息成功")
      this.parentDepartmentList = res.data
    },

    //获取职位信息
    async getPositionInfo() {
      if (this.selectedKeys.length === 0) return this.$message.error("请先选择部门")
      const {data: res} = await this.$http.get(`/admin/addEmpInfo/getPositionInfo/${this.addEmpFormModel.department}`).catch(
        function (e) {
          alert(e)
        })
      if (res.status !== 200) return this.$message.error("获取当前部门职位信息失败")
      this.parentPositionList = res.data
      this.$message.success("获取当前部门职位信息成功")
    },

    //获取学历信息
    async getEduInfo() {
      const {data: res} = await this.$http.get("/admin/addEmpInfo/getEduInfo").catch(
        function (e) {
          alert(e)
        })
      this.edu = res.data
    },

    //提交按钮
    async submitAddEmpInfo() {
      const emp = {}
      emp.empName = this.addEmpFormModel.empName
      emp.empPassword = this.addEmpFormModel.empPassword
      emp.empId = this.addEmpFormModel.empId
      emp.phone = this.addEmpFormModel.phone
      emp.qq = this.addEmpFormModel.qq
      emp.wechat = this.addEmpFormModel.wechat
      emp.email = this.addEmpFormModel.email
      emp.hiredate = this.addEmpFormModel.hiredate
      emp.edu = this.addEmpFormModel.edu
      emp.positionId = this.addEmpFormModel.position
      emp.depId = this.addEmpFormModel.department
      emp.empPhoto = this.addEmpFormModel.empPhoto
      const {data: res} = await this.$http.post("/admin/addEmpInfo/submit", emp).catch(function (e) {
        alert(e)
      })
      if (res.status !== 200) return this.$message.error("添加员工失败")
      this.$message.success("添加成功")
      this.addEmpFormModel = {}
    },

    //重置按钮
    emptyForm() {
      this.$refs.addEmpRef.resetFields()
      this.addEmpFormModel = {}
    },
  }
}
</script>

<style scoped>

</style>
